<template>
    <div id="welcomeBody">


        <div id="tuijian" >
            <petCard/>

        </div>

        <div id="xinxi">

        <div id="xinwen">
            <div style="margin-left: 44%;font-size: 20px">新闻</div>
            <div
            style="
            margin-top: 8px;
                "
            >

            <el-input v-model="xinWenTitle" style="width: 290px;margin-left: 20px" placeholder="请输入新闻标题" /> <el-button :icon="Search" @click="xinWenSearch()"/>

                <el-scrollbar height="280px">
                    <div v-for="item in  newsStore.getXinWenList" :key="item" class="scrollbar-demo-item" @click="showXinWenInfo(item)" style="cursor: pointer;">
                        <div style="margin-left: 0px">{{ item.newsTitle }}</div>
                        <div  style="margin-right: 0px;margin-left: auto">  {{item.newsCreateAt}}</div>
                    </div>
                </el-scrollbar>
             </div>


        </div>


        <div id="guanggao" style="">
           广告
        </div>



        <div id="gonggao" style="   border: 1px dashed #535353;">
            <div style="margin-left: 44%;font-size: 20px;">公告</div>
<!--            <p>最新领养政策</p>-->
            <el-scrollbar height="180px">
                <p v-for="item in newsStore.showGongGaoList" :key="item"  class="scrollbar-demo-item" @click="showXinWenInfo(item)" style="cursor: pointer">{{ item.newsTitle }}</p>
            </el-scrollbar>

            </div>


            <el-dialog :title="title" v-model="open" width="50%" append-to-body center="true" :close="xinXiClose()">

                <template #header>
                    <div class="dialog-footer" style="font-size: 25px">
                        {{title}}
                    </div>
                </template>
                <div style="margin: 0 25% 0 27%" v-if="news.newsImgs!==null&&news.newsImgs!==undefined">
                    <image-preview :src="news.newsImgs" :width="300" :height="200" />
                </div>
                <div style="font-size: 18px">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{news.newsText}}
                </div>
            </el-dialog>
    </div>

    </div>
    <div>
<br/><br/><br/>
    </div>
</template>


<script setup lang="ts">
    import petCard from "@/views/pet/pets/petCard.vue"
    import { ref } from "vue";
    import { Search } from '@element-plus/icons-vue'
    import useNewsStore from "@/store/modules/news";
    import { getToken } from '@/utils/auth.js'
    // import { onMounted } from 'vue'

    const newsStore =  useNewsStore();

    newsStore.getXinWen()
    newsStore.getGongGao()
    //搜索新闻
    const xinWenTitle = ref('')
    const xinWenSearch =()=>{
        if(getToken()){
            if(xinWenTitle.value==''){
                newsStore.getXinWen()
            }else{
                newsStore.searchXinWenByTitle(xinWenTitle.value)
            }

            xinWenTitle.value = ''
        }else{
            alert("请先注册、登录！")
            xinWenTitle.value = ''
        }

    }
    const open = ref(false)
    const title = ref("")
    const news = ref("")
    const showXinWenInfo = (item:API.news)=>{
        open.value = true
        title.value = item.newsTitle
        news.value = item
        console.log(news.newsImgs)
        //增加新闻的浏览次数
        newsStore.plusXinWenPower(item.newsId)
    }

    const xinXiClose=()=>{
        newsStore.getXinWen()
        newsStore.getGongGao()
    }

</script>

<style scoped >
    #welcomeBody{
        /*height: 500px;*/
        background-image: url("../assets/images/welcome3.png");
        background-size: cover;
        background-attachment: fixed;
        display: flex;
    }
    #tuijian{
        /*height: 500px;*/
        width: 70%;
        /*background-color: #40f0ff;*/
        display: flex;
        /*height: 10000px;*/
    }
    #xinxi{
        width:29%;
        margin: 0.5% 1% 0 0;
        padding: 0;
    }

    /*新闻*/
    #xinwen{
        /*height: 200px;*/
        width: 100%;
        border: 1px dashed #535353;
        /*background-color: #4e504c;*/

    }

    .scrollbar-demo-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        /*background: var(--el-color-primary-light-9);*/
        /*color: var(--el-color-primary);*/
        /*background: #40f0ff;*/
        /*color:blue;*/
    }
    .scrollbar-demo-item:hover{
        color:blue;
    }



    #guanggao{
        width: 100%;
        height:100px ;
        background-color: #48D1CC;
        margin: 3px 0 3px 0;
    }



    #gonggao{
        /*height: 200px;*/
        width: 100%;
        /*background-color: #13501e;*/
    }



    .scrollbar-demo-item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        /*background: var(--el-color-primary-light-9);*/
        /*color: var(--el-color-primary);*/
        background: #40f0ff;
        color:blue;
    }

</style>
